<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<view class="top-group-view" :style="'background-image: url('+baseImageUrl+'/selection/img_selection_top.png);'">
			<view class="top-title-view" :style="'height:'+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<view class="search-group">
					<image src="../../static/material/ic_search.png" style="width: 28rpx;height: 28rpx;margin-left: 32rpx;"></image>
					<input class="input-box-view" v-model="keyword" @confirm="formSubmit" confirm-type="search" type="text" placeholder="搜索"  placeholder-class="placeholder-view"  />
				</view>
			</view>
			<!-- 选项卡头部 -->
			<view style="display: flex;align-items: center;">
				<scroll-view class="tab" scroll-x="true"  :scroll-left="scrollLeft" >
					<block v-for="(item,index) in tabData" :key="index" >
						<!-- 标签动态样式 -->
						<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
							{{item.name}}
						</view>
					</block>
				</scroll-view>
				<!-- <image src="../../static/material/ic_arrange.png" class="arrange-image"></image> -->
			</view>
		</view>
		<view :style="'margin-top: '+navTopHeight+'px;'" style="position: fixed;">
			<image :src="baseImageUrl + '/selection/img_selection_bottom.png'" class="smegma-view"><image>
		</view>
		<view>
			<mescroll-uni ref="mescrollRef" :top="navTopHeight*2" :fixed="true" @init="mescrollInit" :up="upOption" @up="upCallback" @down="downCallback">
				<view v-for="(item, index) in goodsList" :key="index" :id="index">
					<view class="list-info" @click="onItemClick(item.pid)">
						<image :src="item.cover" class="item-img" mode="aspectFill"></image>
						<view style="display: flex;flex-direction: column;flex: 1;margin-right: 32rpx;">
							<view class="item-title">{{item.title}}</view>
							<view style="display: flex;margin-top: 8rpx;font-size: 24rpx;">
								<text class="item-type" v-if="item.hasMeterial">有素材</text>
								<text class="item-type" v-if="item.kol">有高佣</text>
								<text style="color: #999999;flex: 1;text-align: right;">月售 {{item.day30Sales}}</text>
							</view>
							<view style="display: flex;margin-top: 16rpx;">
								<text class="item-store">{{item.shop.name}}  </text>
								<text class="item-store">{{item.shop.score}}分</text>
							</view>
							<view style="display: flex;margin-bottom: 16rpx;">
								<view style="display: flex;flex-direction: column;flex: 1;">
									<view style="display: flex;margin-top: 12rpx;font-size: 24rpx;">
										<text style="color: #666666;margin-top: 4rpx;">赚</text>
										<text style="color: #EE0A24;margin-left: 4rpx;margin-top: 4rpx;">¥</text>
										<text style="color: #EE0A24;font-size: 28rpx;">{{item.kolCosFee}}</text>
									</view>
									<view style="display: flex;margin-top: 8rpx;font-size: 20rpx;color: #999999">
										<text style="margin-right: 20rpx;">售价：¥{{item.price}}</text>
										<text >佣金率：{{item.kolCosRatio}}%</text>
									</view>
								</view>
								<view style="display: flex;margin-top: 22rpx;">
									<view style="flex: 1;"></view>
									<text class="item-showcase-btn" @click.stop="chooseAccount(item.pid)">加橱窗</text>
								</view>	
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import configUrls from '@/common/config.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				navHeight: 0,
				navTopHeight: 0,
				tabData:[
					{id:0,name:"全部",vaule:""}
				],
				currentTab: 0, 
				scrollLeft: 0,
				windowWidth: 0,
				upOption:{
					noMoreSize: 10,
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有商品', 
					},
					textNoMore: '~ 没有更多商品 ~'
				},
				goodsList: [],
				chooseSelectionType: '',
				keyword: '',
				choosePid: '',
				accountInfo: {nickName: "账号名称", displayId: ""},
			}
		},
		onReady() {
		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;	
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight;
			this.navTopHeight = this.navHeight + 38;
		},
		onLoad() {
		   	wx.getSystemInfo({ 
		   		success: (res) => {	
		   			this.windowWidth = res.windowWidth;
		   		}
		   	});
			this.getClassification();
		},
		methods: {
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getSelectionList, {
					page: page.num,
					limit: 10,
					lv1: that.chooseSelectionType,
					keywords: that.keyword,
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.goodsList = []; 
						that.goodsList=that.goodsList.concat(respData);
					} else {
						that.goodsList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			toSelectionDetail(id) {
				uni.navigateTo({
					url: '/pages/material/materialDetail?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			formSubmit(e) {
				this.mescroll.resetUpScroll();
			},
			clickTab(e) {
				let clickIndex = e.target.dataset.current;			
				let singleNavWidth = this.windowWidth / 5;  		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth;
				this.currentTab = clickIndex;
				this.chooseSelectionType = this.tabData[clickIndex].value;
				this.mescroll.resetUpScroll();
			},
			getClassification() {
				let that = this;
				this.$Request.postJson(configUrls.getClassification, {
				}).then(res => {
					if (res.code == "10000") {
						this.tabData = [{id:0,name:"全部",vaule:""}];
						that.tabData = that.tabData.concat(res.data.result);
					} 
				}); 
			},
			onItemClick(id) {
				uni.navigateTo({
					url:'/subpages/pages/selectionDetail?goodsId='+id
				})
			},
			chooseAccount(id) {
				this.choosePid = id;
				//监听事件
				let that = this;
				this.$eventHub.$on('chooseAccount', function(item) {
					that.accountInfo.nickName = item.nickName;
					that.accountInfo.displayId = item.displayId;
					that.addShowcaseClick();
				       //清除监听，不清除会消耗资源
				    that.$eventHub.$off('chooseAccount');
				});
				uni.navigateTo({
					url: '/subpages/pages/chooseAccount?displayId='+this.accountInfo.displayId+"&isShowcase=true"
				})
			},
			addShowcaseClick() {
				let that = this;
				this.$Request.postJsonLoadView(configUrls.addSelectionStore, {
					pid: that.choosePid,
					displayId: that.accountInfo.displayId
				}).then(res => {
					if (res.code == "10000") {
						uni.showToast({
							title:'添加橱窗成功！',
							icon: "none",
							duration:2000
						})
					} else {
						uni.showToast({
							title:res.msg,
							icon: "none",
							duration:2000
						})
					}
				}); 
			}
		}
	}
</script>

<style>
	@import url("../../css/selection/selection.css");
</style>
